<template>
  <div class="main" :style="{ 'flex-direction': flexDirection }" ref="partitionDragRef">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "partition-drag",
  components: {
  },
  props: {
    // column row
    flexDirection: {
      type: String,
      default: "row"
    }
  },
  data: () => {
    return {
      slotSettings: [],
      partitionDragInit: {
        isInit: false,
        info: {}
      }
    }
  },
  provide() {
    return {
      slotSettings: this.slotSettings,
      partitionDragInit: this.partitionDragInit
    }
  },
  mounted() {
    this.$nextTick(() => {
      const offsetHeight = this.$refs.partitionDragRef.offsetHeight;
      const offsetWidth = this.$refs.partitionDragRef.offsetWidth;
      if(this.$slots.default){
        this.$slots.default.forEach(item => {
          const componentOptions =item.componentOptions;
          if(componentOptions){
            if (componentOptions.tag == "partition-drag-block" || componentOptions.tag == "partition-drag-line") {
              this.slotSettings.push({
                keyId: componentOptions.propsData.keyId,
                minValue: componentOptions.propsData.minValue,
                maxValue: componentOptions.propsData.maxValue,
                originalFlex: componentOptions.propsData.originalFlex,
                initFlex: componentOptions.propsData.originalFlex,
                show: true
              })
            }
          }
        })
        this.partitionDragInit.isInit = true;
        this.partitionDragInit.info.offsetHeight = offsetHeight;
        this.partitionDragInit.info.offsetWidth = offsetWidth;
        this.partitionDragInit.info.flexDirection = this.flexDirection;
      }
    })
  },
  methods: {
  }
}
</script>

<style scoped>
.main {
  display: flex;
}
</style>